{include file="public/header" title="注册"/}
<style>
    /*屏幕小于750px时*/
	@media only screen and (max-width: 750px){
		.layui-layer-page{
	        width: 50%;
	        margin: 0 auto;
	    }
	}
</style>
              <form id="formAuthentication" class="mb-3">
                <div class="mb-3">
                  <label for="username" class="form-label">账 号</label>
                  <input
                    type="text"
                    class="form-control"
                    name="username"
                    placeholder="请输入您的账户(英文|数字)"
                    autofocus
                  />
                </div>
                <div class="mb-3 form-password-toggle">
                  <label class="form-label" for="password">密 码</label>
                  <div class="input-group input-group-merge">
                    <input
                      type="password"
                      class="form-control"
                      name="password"
                      placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
                      aria-describedby="password"
                    />
                    <span class="input-group-text cursor-pointer"><i class="bx bx-hide"></i></span>
                  </div>
                </div>
                <div class="mb-3 form-password-toggle">
                  <label class="form-label" for="password">确 认 密 码</label>
                  <div class="input-group input-group-merge">
                    <input
                      type="password"
                      class="form-control"
                      name="password2"
                      placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
                      aria-describedby="password"
                    />
                    <span class="input-group-text cursor-pointer"><i class="bx bx-hide"></i></span>
                  </div>
                </div>
                <div class="mb-3">
                  <label for="email" class="form-label">邮 箱</label>
                  <input type="text" class="form-control" id="email" name="email" placeholder="请输入您的邮箱" />
                </div>
                
                <!--引入注册公共部分开始-->
                {include file="public/regVerification"/}
                <!--引入注册公共部分结束-->
            
                <div class="mb-3">
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" checked name="terms" />
                    <label class="form-check-label" for="terms-conditions">
                      我 同 意
                      <a href="javascript:void(0);" lay-on="user_agreement">用户协议</a> & <a href="javascript:void(0);" lay-on="privacy">隐私政策</a>
                    </label>
                  </div>
                </div>
                <button class="btn btn-primary d-grid w-100">立 即 注 册</button>
              </form>

              <p class="text-center">
                <span>已 经 有 账 号 了?</span>
                <a href="/User/Login">
                  <span>立 即 登 录</span>
                </a>
              </p>
    <!-- / Content -->
{include file="public/footer" functons="Reg"/}

<script>
    layui.use(function() {
    	var layer = layui.layer;
        var util = layui.util;
        var width,height;
        var userAgentInfo = navigator.userAgent;

        var mobileAgents = [ "Android", "iPhone", "SymbianOS", "Windows Phone", "iPad","iPod"];

        var mobile_flag = false;

        //根据userAgent判断是否是手机
        for (var v = 0; v < mobileAgents.length; v++) {
            if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
                mobile_flag = true;
                break;
            }
        }

        var screen_width = window.screen.width;
        var screen_height = window.screen.height;    

        //根据屏幕分辨率判断是否是手机
        if(screen_width < 500 && screen_height < 800){
            mobile_flag = true;
        }
        
        //true 为 手机 false 为 PC
        if(mobile_flag){
            width = '90%';
            height = '60%';
        }else{
            width = '600px';
            height = '700px';
        }
        
        //点击展开用户协议
        util.on('lay-on', {
            user_agreement: function(){
                layer.open({
                    type: 1, // page 层类型
                    area: [width, height],
                    title: '用户协议',
                    shade: 0.6, // 遮罩透明度
                    shadeClose: true, // 点击遮罩区域，关闭弹层
                    maxmin: true, // 允许全屏最小化
                    anim: 0, // 0-6 的动画形式，-1 不开启
                    content: `<div style="padding: 32px;">{:getConfig()['user_agreement']}</div>`
                });
            },
            privacy: function(){
                layer.open({
                    type: 1, // page 层类型
                    area: [width, height],
                    title: '隐私政策',
                    shade: 0.6, // 遮罩透明度
                    shadeClose: true, // 点击遮罩区域，关闭弹层
                    maxmin: true, // 允许全屏最小化
                    anim: 0, // 0-6 的动画形式，-1 不开启
                    content: `<div style="padding: 32px;">{:getConfig()['privacy']}</div>`
                });
            }
        });
    });
 </script>